import type { ReactNode, CSSProperties } from 'react';
import type { IBaseComponentProps } from './common';

/**
 * 布局容器组件 Props
 * @description 主布局容器组件的属性接口
 */
export interface IMainLayoutProps extends IBaseComponentProps {
  /** 头部内容 */
  header?: ReactNode;
  /** 侧边栏内容 */
  sidebar?: ReactNode;
  /** 底部内容 */
  footer?: ReactNode;
  /** 主内容区域 */
  content: ReactNode;
  /** 是否显示侧边栏 */
  showSidebar?: boolean;
  /** 是否显示头部 */
  showHeader?: boolean;
  /** 是否显示底部 */
  showFooter?: boolean;
  /** 侧边栏是否可折叠 */
  sidebarCollapsible?: boolean;
  /** 侧边栏是否折叠 */
  sidebarCollapsed?: boolean;
  /** 侧边栏宽度 */
  sidebarWidth?: number;
  /** 侧边栏折叠宽度 */
  sidebarCollapsedWidth?: number;
  /** 头部高度 */
  headerHeight?: number;
  /** 底部高度 */
  footerHeight?: number;
  /** 侧边栏折叠状态变化回调 */
  onSidebarCollapse?: (collapsed: boolean) => void;
}

/**
 * 头部组件 Props
 * @description 头部组件的属性接口
 */
export interface IHeaderProps extends IBaseComponentProps {
  /** 标题 */
  title?: ReactNode;
  /** 左侧内容 */
  left?: ReactNode;
  /** 右侧内容 */
  right?: ReactNode;
  /** 是否固定 */
  fixed?: boolean;
  /** 背景色 */
  backgroundColor?: string;
  /** 头部高度 */
  height?: number;
  /** 是否显示分割线 */
  bordered?: boolean;
  /** 头部样式 */
  headerStyle?: CSSProperties;
}

/**
 * 侧边栏组件 Props
 * @description 侧边栏组件的属性接口
 */
export interface ISidebarProps extends IBaseComponentProps {
  /** 菜单项列表 */
  menuItems: ISidebarMenuItem[];
  /** 当前选中的菜单项 */
  selectedKey?: string;
  /** 当前展开的菜单项 */
  openKeys?: string[];
  /** 是否折叠 */
  collapsed?: boolean;
  /** 是否可折叠 */
  collapsible?: boolean;
  /** 侧边栏宽度 */
  width?: number;
  /** 折叠宽度 */
  collapsedWidth?: number;
  /** 主题 */
  theme?: 'light' | 'dark';
  /** 菜单模式 */
  mode?: 'vertical' | 'horizontal' | 'inline';
  /** 菜单项点击回调 */
  onMenuClick?: (key: string, item: ISidebarMenuItem) => void;
  /** 菜单项展开回调 */
  onOpenChange?: (openKeys: string[]) => void;
  /** 折叠状态变化回调 */
  onCollapse?: (collapsed: boolean) => void;
}

/**
 * 侧边栏菜单项接口
 * @description 侧边栏菜单项的数据结构
 */
export interface ISidebarMenuItem {
  /** 菜单项键值 */
  key: string;
  /** 菜单项标题 */
  title: string;
  /** 菜单项图标 */
  icon?: ReactNode;
  /** 路由路径 */
  path?: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 是否隐藏 */
  hidden?: boolean;
  /** 子菜单项 */
  children?: ISidebarMenuItem[];
  /** 权限标识 */
  permission?: string;
  /** 徽章数量 */
  badge?: number;
  /** 徽章颜色 */
  badgeColor?: string;
}

/**
 * 底部组件 Props
 * @description 底部组件的属性接口
 */
export interface IFooterProps extends IBaseComponentProps {
  /** 版权信息 */
  copyright?: ReactNode;
  /** 链接列表 */
  links?: Array<{
    title: string;
    href: string;
    target?: string;
  }>;
  /** 是否固定 */
  fixed?: boolean;
  /** 背景色 */
  backgroundColor?: string;
  /** 底部高度 */
  height?: number;
  /** 是否显示分割线 */
  bordered?: boolean;
  /** 底部样式 */
  footerStyle?: CSSProperties;
}

/**
 * 面包屑组件 Props
 * @description 面包屑组件的属性接口
 */
export interface IBreadcrumbProps extends IBaseComponentProps {
  /** 面包屑项列表 */
  items: IBreadcrumbItem[];
  /** 分隔符 */
  separator?: ReactNode;
  /** 是否显示首页 */
  showHome?: boolean;
  /** 首页标题 */
  homeTitle?: string;
  /** 首页路径 */
  homePath?: string;
  /** 项点击回调 */
  onItemClick?: (item: IBreadcrumbItem, index: number) => void;
}

/**
 * 面包屑项接口
 * @description 面包屑项的数据结构
 */
export interface IBreadcrumbItem {
  /** 项标题 */
  title: string;
  /** 路由路径 */
  path?: string;
  /** 是否可点击 */
  clickable?: boolean;
  /** 图标 */
  icon?: ReactNode;
}

/**
 * 页面容器组件 Props
 * @description 页面容器组件的属性接口
 */
export interface IPageContainerProps extends IBaseComponentProps {
  /** 页面标题 */
  title?: ReactNode;
  /** 页面副标题 */
  subTitle?: ReactNode;
  /** 面包屑 */
  breadcrumb?: IBreadcrumbItem[];
  /** 页面额外内容 */
  extra?: ReactNode;
  /** 页面标签 */
  tags?: ReactNode;
  /** 页面内容 */
  content?: ReactNode;
  /** 页面底部内容 */
  footer?: ReactNode;
  /** 是否显示返回按钮 */
  showBack?: boolean;
  /** 返回按钮文本 */
  backText?: string;
  /** 是否加载中 */
  loading?: boolean;
  /** 返回按钮点击回调 */
  onBack?: () => void;
}

/**
 * 响应式容器组件 Props
 * @description 响应式容器组件的属性接口
 */
export interface IResponsiveContainerProps extends IBaseComponentProps {
  /** 断点配置 */
  breakpoints?: {
    xs?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
    xxl?: number;
  };
  /** 当前断点 */
  currentBreakpoint?: string;
  /** 是否移动端 */
  isMobile?: boolean;
  /** 是否平板端 */
  isTablet?: boolean;
  /** 是否桌面端 */
  isDesktop?: boolean;
  /** 断点变化回调 */
  onBreakpointChange?: (breakpoint: string) => void;
}